.workingHoursTitle {
  margin-top: 20px;
}

.weekDay {
  position: relative;

  & a {
    cursor: pointer;
  }

  & :global(.title) {
    & span {
      margin-left: 10px;
    }
  }

  & :global(.timeSlot) {
    margin-bottom: 10px;
    margin-left: 23px;

    & :global(.timeSelect) {
      display: inline-block;
      position: relative;
      vertical-align: top;

      /* stylelint-disable */
      & :global(.react-form-message-error) {
        color: white;
        background-color: red;
        width: 100px;
        padding: 5px 5px;
        z-index: 1;
      }
      /* stylelint-enable */
    }

    & select {
      min-height: auto;
      margin-right: 10px;
      padding: 0.5em 0;
      min-width: 100px;
    }

    & :global(.starTime) {
      float: left;
    }

    & :global(.endTime) {
      float: left;
    }

    & :global(.starTimeLabel) {
      margin-right: 10px;
      vertical-align: top;
    }

    & :global(.endTimeLabel) {
      margin-right: 10px;
      vertical-align: top;
    }

    & :global(.remove) {
      position: relative;
      vertical-align: top;

      & svg {
        fill: #4a90e2;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
      }
    }
  }

  & :global(.addMore) {
    margin-bottom: 10px;
    margin-left: 23px;
    clear: both;
  }
}

.saveButton {
  margin-bottom: 50px;

  & :global(.availability_checkmark) {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    stroke-width: 5;
    stroke: #2ab865;
    stroke-miterlimit: 10;
    margin: 0 auto;
    box-shadow: inset 0 0 0 #fff;
    animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
  }

  & :global(.availability_checkmark__circle) {
    stroke-width: 2;
    stroke-miterlimit: 10;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }

  & :global(.availability_checkmark__check) {
    transform-origin: 50% 50%;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
}
